<template>
    <view class="pg-center">
        <view class="w-750 fl-ro-cen bg-white">
            <view class="w-750">
                <wd-search v-model="value" @search="search" @change="change" maxlength="10" focusWhenClear hide-cancel />
            </view>
        </view>
        <view class="w-750">
            <wd-cell-group>
                <wd-cell v-for="(item, index) in 10" size="large" :title="'广告' + index" border is-link @click="ad_onclick(item, index)" />
            </wd-cell-group>
        </view>
    </view>

    <wd-popup v-model="popupShow" position="bottom" :safe-area-inset-bottom="true" custom-class="fl-co-cen ju-cen">
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="display">播放</text>
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="stop">停止</text>
        <text class="w-750 fs-34 text-center p-20 bts-1" @click="del">删除</text>
        <text class="w-750 fs-34 text-center p-20 bts-10" @click="cancel">取消</text>
    </wd-popup>
</template>

<script setup>
    import { ref } from 'vue';

    const popupShow = ref(false); //点击列表底部弹窗

    //点击广告列表
    const ad_onclick = (item, index) => {
        console.log('点击了', index);
        popupShow.value = true;
    };

    //点击播放
    const display = () => {
        console.log('点击播放');
        popupShow.value = false;
    };

    //点击停止
    const stop = () => {
        console.log('点击停止');
        popupShow.value = false;
    };

    //点击删除
    const del = () => {
        console.log('点击删除');
        popupShow.value = false;
    };

    //点击取消 关闭弹窗
    const cancel = () => {
        popupShow.value = false;
    };
</script>

<style lang="scss" scoped>
    .txt {
        border-bottom: 1rpx solid #f8f8f8;
    }
</style>
